<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>大数据信息时代</title>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a, img {
	border: 0;
}

body {
	font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
	overflow: hidden;
	/*text-align:center;*/
}

.test {
	position: fixed;
	clear: both;
	z-index: 10;
	height: 13rem;
	width: 23rem;
	top: 35%;
	left: 40%;
}

#q {
	position: absolute;
	z-index: 0;
}

.zhanghao {
	padding-bottom: 20%;
}

.account-div {
	float: left;
	/*height: 100%;*/
	margin: 0 0 -4px 0;
	padding: 0px;
	width: 2rem;
	height: 2rem;
	text-align: center;
}

.account-div img {
	margin-top: 25%;
	margin-bottom: 25%;
	height: 60%;
	width: 60%;
}

.inp {
	float: left;
	width: 20rem;
	height: 2rem;
	font-size: 1.4rem;
	BACKGROUND-COLOR: transparent;
	BORDER-BOTTOM: #ffffff 1px solid;
	BORDER-LEFT: #ffffff 1px solid;
	BORDER-RIGHT: #ffffff 1px solid;
	BORDER-TOP: #ffffff 1px solid;
	COLOR: red;
	border-color: #ffffff #ffffff #ffffff #ffffff;
}

.login {
	width: 5rem;
	height: 2rem;
	margin-left: 4.5rem;
	font-size: 1.5rem;
	BACKGROUND-COLOR: transparent;
	BORDER-BOTTOM: #ffffff 1px solid;
	BORDER-LEFT: #ffffff 1px solid;
	BORDER-RIGHT: #ffffff 1px solid;
	BORDER-TOP: #ffffff 1px solid;
	border-color: black black black black;
	COLOR: yellow;
	margin-top: -10%;
	margin-bottom: 5%;
}

#tx {
	text-align: center;
	float: left;
	font-size: 1rem;
	color: red;
	width: 15rem;
	margin-left: 4.5rem;
	display: none;
}
</style>
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script th:src="@{/js/jquery-3.2.1.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery-3.2.1.min.js}" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('app', []);


	$(function() {
		var s = window.screen;
		var width = q.width = s.width;
		var height = q.height = s.height;
		var letters = Array(256).join(1).split('');
		var draw = function() {
			q.getContext('2d').fillStyle = 'rgba(0,0,0,.05)';
			q.getContext('2d').fillRect(0, 0, width, height);
			q.getContext('2d').fillStyle = '#0F0';
			letters.map(function(y_pos, index) {
				text = Math.floor(Math.random() * 10);
				x_pos = index * 10;
				q.getContext('2d').fillText(text, x_pos, y_pos);
				letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0
						: y_pos + 10;
			});
		};
		setInterval(draw, 50);

	});	function userRegister() {
		var name = $("#name").val();
		var pwd = $("#pwd").val();
		var i = 2;
		if(name.length < 5 || name.length > 15) {
			$("#tx").html("帐号长度问题");
			$("#tx").css("display", "block");
			i--;
			return;
		}
		if(pwd.length < 5 || pwd.length > 15) {
			$("#tx").html("密码长度问题");
			$("#tx").css("display", "block");
			i--;
			return;

		}
		//验证通过
		if(i == 2) {
			$("#tx").html("");
			$.ajax({
				//										url: "http://localhost:8080/add/userInfo?name=" + name + "&pwd=" + pwd,
				url: "http://localhost:8080/add/userInfo",
				type: "GET",
				data: { "name": name, "pwd": pwd },
				//					contentType: "application/json; charset=utf-8",
				dataType: 'JSON', //here
				success: function(obj) {
					var data = obj;
					var code = data.code;
					console.log(code);
					var msg = data.msg;
					//实现跳转
					if(code == 0) {
						$("#tx").css("color", "green");

					} else {
						$("#tx").css("color", "red");

					}

					$("#tx").html(msg);
					$("#tx").css("display", "block");

				},
				error: function(obj) {
					var data = obj;
					console.log(data);
				}
			});
		}
	}
	//用户登录
	function userLogin() {
		var name = $("#name").val();
		var pwd = $("#pwd").val();
		var i = 2;
		if(name.length < 5 || name.length > 15) {
			$("#tx").html("帐号长度问题");
			$("#tx").css("display", "block");
			i--;
			return;
		}
		if(pwd.length < 5 || pwd.length > 15) {
			$("#tx").html("密码长度问题");
			$("#tx").css("display", "block");
			i--;
			return;
		}
		if(i == 2) {
			$.ajax({
				//										url: "http://localhost:8080/user/login?name=" + name + "&pwd=" + pwd,
				url: "http://localhost:8080/user/login",
				type: "GET",
				data: { "name": name, "pwd": pwd },
				//					contentType: "application/json; charset=utf-8",
				dataType: 'JSON', //here
				success: function(obj) {
					var data = obj;
					var code = data.code;
					console.log(code);
					var msg = data.msg;
					//实现跳转
					if(code == 0) {
						$("#tx").css("color", "green");
						
						location.href = "/socket?name="+name;
					

						
					} else {
						$("#tx").css("color", "red");

					}

					$("#tx").html(msg);
					$("#tx").css("display", "block");

				},
				error: function(obj) {
					var data = obj;
					console.log(data);
				}
			});
		}

	}
</script>
</head>

<body>

	<canvas width="500" height="500" id="q"></canvas>
	<div class="test">
		<div class="zhanghao">
			<div class="account-div">
				<img src="img/user_icon_copy.png" />
			</div>
			<input id="name" type="text" class="inp" />
		</div>
		<div class="zhanghao">
			<div class="account-div">
				<img src="img/tick.png" />
			</div>
			<input id="pwd" type="password" class="inp" />
		</div>
		<input type="button" class="login" value="注册" ng-click="toProducer()" onclick="userRegister()" />
		<input type="button" class="login" value="登录" onclick="userLogin()" />
		<span id="tx">密碼錯誤</span>

	</div>
</body>

</html>